這篇主要寫配置，還沒有安裝的請看上篇

檔案載入相依處理

其實我看人家有用order處理，不過之前都用失敗，後來直接列進去

gulpfile.js
1
2
3
4
5
6
7
8
9
// script順序
var scriptList = [
      'jquery.bxslider.min.js',
      'jquery.unveil.min.js',
      'fancybox/jquery.fancybox-1.3.4_patch_2.js',
      'ParsedQueryString.js',
      'jquery.mCustomScrollbar.min.js',
      'main.js'
].map(function(val){ return paths.scripts.src + "/" + val; });

同樣css也是這樣處理

gulpfile.js
1
2
3
4
5
6
7
8
// css順序
var cssList = [
    'reset.css',
    'jquery.mCustomScrollbar.css',
    'main.css',
    'style-m.css',
    'style-s.cs'
].map(function(val){ return paths.styles.src + "/" + val; });

壓縮JS

解釋：將上面的scriptList傳入，使用uglify壓縮，
使用concat存為同一個檔案並重新命名為combined.min.js，
最後輸出到paths.scripts.dest

gulpfile.js
1
2
3
4
5
6
7
8
// 處理script
gulp.task('scripts', function() {
  //壓縮js，排序，合併
  return gulp.src(scriptList)
    .pipe(uglify())
    .pipe(concat('combined.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
});

壓縮CSS

gulpfile.js
1
2
3
4
5
6
7
8
gulp.task('css', function() {
  //壓縮css，合併
  return gulp.src(cssList)
    .pipe(minifyCSS())
    .pipe(concat('combined.min.css'))
    .pipe(gulp.dest(paths.styles.dest));
});

壓縮圖片

gulpfile.js
1
2
3
4
5
6
7
gulp.task('images', function() {
return gulp.src(paths.images.files)
    // 重新壓縮圖片
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest(paths.images.dest));
});

SASS處理

因為我都是編譯好在丟到伺服器上，所以一般開發就用這個script
註解掉的地方是本來要帶入sourceMap來追css原始位置的，不過試不出來 0rz
值得一提的是autoprefixer可以設置的地方頗多，可以參考官方說明，最後的notify則是處理完以後冒泡訊息。

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp.task('sass-dev', function() {
return gulp.src(paths.sass.files)
        /*.on('data', processWinPath)*/
        .pipe(plumber())
        .pipe(sass(
        /*  {
             outputStyle: 'compressed',
             errLogToConsole: true,
             sourceComments: 'map',
             sourceMap: 'sass',
             includePaths : [paths.sass.src]
          } */
        ))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(paths.sass.dest))
        .pipe(notify("Found file: <%= file.relative %>!"))
});

這裡是processWinPath

gulpfile.js
1
2
3
4
5
6
7
8
9
// 處理windows路徑問題
var processWinPath = function(file) {
  var path = require('path');
  if (process.platform === 'win32') {
    file.path = path.relative('.', file.path);
    file.path = file.path.replace(/\\/g, '/');
  }
};

偵聽變化編譯SASS

因為gulp預設為default，所以通常我都是進到資料夾執行gulp
就偵聽變化後呼叫上面的SASS處理，搭配liveReload就可以直接存檔看效果啦。

gulpfile.js
1
2
3
4
5
gulp.task('default', function () {
    gulp.run('sass-dev');
    gulp.watch(paths.sass.src + "/**/*.scss", ['sass-dev'])
    ;   
});

混搭

執行gulp compass就幫我幫css及js壓好，封裝以後再寫個d將push、upload事件組合在一起，並依照順序執行。
以後一個gulp d就能一次處理起來，而各個任務也能獨立開來方便維護。
當要佈署多台機器時就可以多寫不同task來串連，達成一鍵佈署功能。

gulpfile.js
1
2
3
gulp.task('compass', ['css', 'scripts']);
gulp.task('dev-mode', ['sass']);
gulp.task('d', ['compass', 'push', 'upload']

這篇就是實際投入在自身使用的專案上的常用配置啦，分享給各位！！
有不錯的配置記得分享阿